<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				width: 800px;
				height: 300px;
			}
			.con{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -400px;
				margin-top: -150px;
			}
			.photo{
				width: 300px;
				height: 300px;
				background-image: url(images/tu.jpg);
				background-size: contain;
				background-position: center center;
				border-radius: 50%;
			}
			td{
				text-align: center;
				color: red;
			}
			td:hover{
				background-color: aqua;
				border-radius: 60%;
			}
		</style>
		<script type="text/javascript">
			function funClick(){
				location.href="https://image.baidu.com/search/index?tu=baiduimage&word="+event.target.innerHTML
			}
			let index=1
			let t1;
			let obj;
			function funOver(){
				clearInterval(t1)
				obj=event.target
				let url=`images/${obj.innerHTML}/${index}.jpg`
				document.querySelector(".photo").setAttribute("style",`background-image:url(${url});`)
			}
			function funOut(){
				t1=setInterval(display,1000)
			}
			function display(){
				index ++
				if(index>7){
					index=1;
				}
				let url=`images/${obj.innerHTML}/${index}.jpg`
					document.querySelector(".photo ").setAttribute("style",`background-image:url(${url});`)
				}
				let curOp=1
				let change=-0.1
				function changeOpacity(){                    
					if(curOp>1){
						change=-0.1
					}else if(curOp<0.1){
						change=0.1
					}
					curOp=curOp+change;
					document.querySelector(".photo").setAttribute("style",`opacity:${curOp};`)
				}
		</script>
	</head>
	<body onload="changeOpacity()">
		<div class="con">
			<table>
				<tr>
					<td rowspan="5">
						<div class="photo"></div>
					</td>
					<td colspan="2">
						<input type="text" id="key"/>
						<button id="search">搜索</button>
					</td>
				</tr>
				<tr>
					<td class="note">中国国宝</td>
					<td class="note">兵马俑</td>
				</tr>   
				<tr>    
					<td class="note">川菜</td>
					<td class="note">粤菜</td>
				</tr>   
				<tr>   
					<td class="note">新疆风情</td>
					<td class="note">客家土楼</td>
				</tr>   
				<tr>    
					<td class="note">民族乐器</td>
					<td class="note">青铜重器</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			let notes=document.querySelectorAll(".note")
			for (var i = 0; i < notes.length; i++) {
				notes[i].addEventListener("click",funClick)
				notes[i].addEventListener("mouseover",funOver)
				notes[i].addEventListener("mouseout",funOut)
			}
			document.getElementById("search").onclick=function(){
				let key=document.getElementById("key").value
				if(key!=""){
					location.href="https://image.baidu.com/search/index?tu=baiduimage&word="+key
					}                                                                              
				}
				setInterval(changeOpacity,10000)
		</script>
	</body>
</html>
